//类组件写法
import React from 'react';

class AppByClass extends React.Component {
  //字符串拼接写法：替换模板
  // itemTpl(item) {
  //   var tpl = '';
  //   //遍历数组里的key,value并组装li标签
  //   for (var [key, value] of Object.entries(item)) {
  //     //递归嵌套的对象
  //     if (typeof value === 'object') {
  //       //子节点是对象，递归，拼接li
  //       tpl += `<ul><li>${key}: ${this.itemTpl(value)}</li></ul>`;
  //     } else {
  //       //子节点不是对象，拼接li
  //       tpl += `<li>${key}: ${value}</li>`;
  //     }
  //   }
  //   return tpl;
  // }

  //reduce写法：
  itemTpl(item) {
    return Object.entries(item).reduce((prev, [key, value]) => {
      if (typeof value === 'object') {
        prev += `<ul><li>${key}: ${this.itemTpl(value)}</li></ul>`;
      } else {
        prev += `<li>${key}: ${value}</li>`;
      }

      return prev;
    }, '');
  }

  render() {
    //传入{...this.props}属性和render方法
    return (
      <div>
        <List {...this.props} render={this.itemTpl.bind(this)}></List>
      </div>
    );
  }
}

//List组件只负责视图渲染
class List extends React.Component {
  render() {
    //接收属性
    let { info, render } = this.props;

    //dangerouslySetInnerHTML: 将字符串模板转为HTML节点
    //返回一个对象，对象里__html字段为指定字段
    return (
      <ul
        dangerouslySetInnerHTML={{
          __html: info.map((item) => render(item))
        }}
      ></ul>
    );
  }
}

export default AppByClass;
